<template>
    <div class="login-modal">
<<<<<<< HEAD
      
        <div class="mask" @click="chanIsShowLoginModal(false)"></div>
        <div class="login-box">
            <img @click="chanIsShowLoginModal(false)" class="close" src="../assets/images/login/userArrow.png" alt="">
               <ul class="title">
                <li  :class="isShowForm==true?'active':''" @click="isShowForm=true">手机号码登录</li>
                <li style="margin:-2px 10px 0;cursor: auto;">|</li>
                <li :class="isShowForm==false?'active':''" @click="isShowForm=false">微信扫码登录</li>
               </ul>
               <div class="body">
            <div class="form" v-show="isShowForm">
                <div class="input-group">
                    <input type="text" placeholder="请输入手机号">
                
                </div>
                <div class="input-group">
                <slide-verify :l="42" :r="20" :w="362" :h="140" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg"></slide-verify>
            </div>
                <div class="input-group">
                    <input type="text" placeholder="请输入验证码">
                    <div class="btn get-code" >
                     <span v-show="!isShowCount" @click="getMScode">获取验证码</span>
                     <span v-show="isShowCount">{{ count }}s</span>
                    </div>
                </div>
            <div class="btn" @click="submitLogin">
                登录
            </div>
            </div>
            <div class="qrcode" v-show="!isShowForm">乐</div>
        </div>
        </div>
       
=======

        <div class="mask" @click="chanIsShowLoginModal(false)"></div>
        <div class="login-box">
            <img @click="chanIsShowLoginModal(false)" class="close" src="../assets/images/login/userArrow.png" alt="">
            <ul class="title">
                <li :class="isShowForm == true ? 'active' : ''" @click="isShowForm = true">手机号码登录</li>
                <li style="margin:-2px 10px 0;cursor: auto;">|</li>
                <li :class="isShowForm == false ? 'active' : ''" @click="isShowForm = false">微信扫码登录</li>
            </ul>
            <div class="body">
                <div class="form" v-show="isShowForm">
                    <div class="input-group">
                        <input type="text" v-model="phoneNumber" placeholder="请输入手机号">

                    </div>
                    <div class="input-group">
                        <slide-verify :l="42" :r="20" :w="362" :h="140" @success="onSuccess" @fail="onFail"
                            @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock"
                            :slider-text="msg"></slide-verify>
                    </div>
                    <div class="input-group">
                        <input type="text" placeholder="请输入验证码" v-model="SMScode">
                        <div class="btn get-code">
                            <span v-show="!isShowCount" @click="getMScode">获取验证2345码</span>
                            <span v-show="isShowCount">{{ count }}s</span>
                        </div>
                    </div>
                    <div class="btn" @click="submitLogin">
                        登录
                    </div>
                </div>
                <div class="qrcode" v-show="!isShowForm">乐</div>
            </div>
        </div>

>>>>>>> 6bd7ffb (test123)
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
<<<<<<< HEAD
import {SendSMSAPI} from "@/request/api"
export default {
    data () {
        return {

=======
import { SendSMSAPI, PhoneLoginAPI } from "@/request/api"
import { validatePhoneNumber } from '@/utils';
export default {
    data() {
        return {
            phoneNumber:"",
>>>>>>> 6bd7ffb (test123)
            isShowForm: true,
            msg: "向右滑动",
            count: 60,
            isShowCount: false,
            timer: null,
<<<<<<< HEAD
            maxCount:30,
=======
            maxCount: 30,
            SMScode: "",
>>>>>>> 6bd7ffb (test123)
        }
    },
    methods: {
        ...mapMutations({
<<<<<<< HEAD
            chanIsShowLoginModal:"showLoginModal/chanIsShowLoginModal"
=======
            chanIsShowLoginModal: "showLoginModal/chanIsShowLoginModal"
>>>>>>> 6bd7ffb (test123)
        }),
        countDown() {
            //倒计时
            this.timer = setInterval(() => {
                this.count--;
                if (this.count === 0) {
                    clearInterval(this.timer)
                    this.count = this.maxCount;
                    this.isShowCount = false;

                }
<<<<<<< HEAD
            },1000)
        },
        //点击获取验证码
       async getMScode() {
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!reg.test(this.phoneNumber)) {
                alert("请输入正确的手机号")
                return
            }
            if (this.msg == "再试一次" || this.msg == "向右滑动") {
                alert("请移动")
                return
           }
           let res = await SendSMSAPI({
               phone: this.phoneNumber
           });
           console.log(res);
           if (!res) return;
           this.isShowCount = true;
           this.countDown()
        //    if (res.code === 0) {
        //        this.isShowCount = true;
        //        this.countDown()
        //    }
        //    else {
        //     alert(res.message)
        //    }
=======
            }, 1000)
        },
        verifyFn() {
            console.log(this.phoneNumber);
            if (!validatePhoneNumber(this.phoneNumber)) {
                alert("请输入正确的手机号")
                return false
            }
            if (this.msg == "再试一次" || this.msg == "向右滑动") {
                alert("请移动")
                return false
            }
            return true
        },
        //点击获取验证码
        async getMScode() {
            if (!this.verifyFn()) return;

            let res = await SendSMSAPI({
                phone: this.phoneNumber
            });
            console.log(res);
            if (!res) return;
            this.isShowCount = true;
            this.countDown()
            //    if (res.code === 0) {
            //        this.isShowCount = true;
            //        this.countDown()
            //    }
            //    else {
            //     alert(res.message)
            //    }
>>>>>>> 6bd7ffb (test123)
            // alert("通过")
            this.isShowCount = true
            this.countDown()
        },
        // 拼图成功
<<<<<<< HEAD
    onSuccess(times) {
      let ms = (times / 1000).toFixed(1);
      this.msg = "login success, 耗时 " + ms + "s";
    },
    // 拼图失败
    onFail() {
      this.onRefresh(); // 重新刷新拼图
    },
    // 拼图刷新
    onRefresh() {
      this.msg = "再试一次";
    },
        submitLogin() {
            if (this.msg == "再试一次" || this.msg == "向右滑动") {
                alert("请移动")
                return
            }

            alert("通过")
=======
        onSuccess(times) {
            let ms = (times / 1000).toFixed(1);
            this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
            this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
            this.msg = "再试一次";
        },
        async submitLogin() {
            // if (this.msg == "再试一次" || this.msg == "向右滑动") {
            //     alert("请移动")
            //     return
            // }
            if (!this.verifyFn()) return;
            if (!this.SMScode.trim()) {
                alert("请输入手机验证码")
                return
            }

            let res = await PhoneLoginAPI({
                verifyCode: this.SMScode,
                phone: this.phoneNumber
            });
            if (!res) return;
            alert("登录成功")
            this.chanIsShowLoginModal(false)
            localStorage.setItem("x-auth-token", res["x-auth-token"])
            console.log(res);
>>>>>>> 6bd7ffb (test123)
        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/css/global.less";
<<<<<<< HEAD
    .login-modal{
        width: 100%;
        height: 100%;
        position:fixed;
        left: 0;
        top: 0;


        .mask{
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0,0,0.6);
        }
        .login-box{
            width: 555px;
            height: 423px;
            background: url(../assets/images/login/loginBg.png) no-repeat;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            .close{
                position:absolute;
                right: 60px;
                top: 20px;
                
            }
            .title{
                display: flex;
                justify-content: center;
                padding-top: 40px;
                font-size: 18px;
                color: #ccc;
                li{
                    cursor: pointer;
                }
            }

            .body{
                width: 360px;
                height: 200px;
                // background-color:#fcf;
                margin: 25px auto 0;
                .form{
                    input{
                        flex:1;
                        height: 48px;
                        text-indent: 10px;
                        border: 1px solid #ccc;
                    }
                    .input-group{
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 20px;
                        .get-code{
                             width: 80px;
                             margin-left: 10px;
                             padding: 0 10px;
                             font-size: 16px;
                        }
                    }
                    .btn{
                        background-color: @base-color;
                        height: 50px;
                        line-height: 50px;
                        color: #fff;
                        text-align: center;
                        font-size: 18px;
                        cursor: pointer;
                    }
                }
            }
            .active{
                color: #333;
            }
        }
    }
    /deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
=======

.login-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;


    .mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .login-box {
        width: 555px;
        height: 423px;
        background: url(../assets/images/login/loginBg.png) no-repeat;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;

        .close {
            position: absolute;
            right: 60px;
            top: 20px;

        }

        .title {
            display: flex;
            justify-content: center;
            padding-top: 40px;
            font-size: 18px;
            color: #ccc;

            li {
                cursor: pointer;
            }
        }

        .body {
            width: 360px;
            height: 200px;
            // background-color:#fcf;
            margin: 25px auto 0;

            .form {
                input {
                    flex: 1;
                    height: 48px;
                    text-indent: 10px;
                    border: 1px solid #ccc;
                }

                .input-group {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;

                    .get-code {
                        width: 80px;
                        margin-left: 10px;
                        padding: 0 10px;
                        font-size: 16px;
                    }
                }

                .btn {
                    background-color: @base-color;
                    height: 50px;
                    line-height: 50px;
                    color: #fff;
                    text-align: center;
                    font-size: 18px;
                    cursor: pointer;
                }
            }
        }

        .active {
            color: #333;
        }
    }
}

/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;

>>>>>>> 6bd7ffb (test123)
    canvas {
        position: absolute;
        left: 0;
        top: -140px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
<<<<<<< HEAD
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
=======

    .slide-verify-block {
        width: 85px;
        height: 136px;
    }

>>>>>>> 6bd7ffb (test123)
    .slide-verify-refresh-icon {
        top: -140px;
        display: none;
    }
<<<<<<< HEAD
=======

>>>>>>> 6bd7ffb (test123)
    &:hover {
        canvas {
            display: block;
        }
<<<<<<< HEAD
=======

>>>>>>> 6bd7ffb (test123)
        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>